import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:yp/helper.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'logic.dart';
import 'state.dart';

class GiftCardConsumptionRecordPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _GiftCardConsumptionRecordPage();
  }
}

class _GiftCardConsumptionRecordPage extends State<GiftCardConsumptionRecordPage> {
  final GiftCardConsumptionRecordLogic logic = Get.put(GiftCardConsumptionRecordLogic());
  final GiftCardConsumptionRecordState state = Get.find<GiftCardConsumptionRecordLogic>().state;

  void _onRefresh() async{
    state.currentPage = 1;
    logic.getGiftCardConsumptionRecordList();
    logic.refreshController.refreshCompleted();
  }

  void _onLoading() async{
    state.currentPage++;
    logic.getGiftCardConsumptionRecordList();
    logic.refreshController.loadComplete();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Color(0xff0F0B0A),
        brightness: Brightness.dark,
        title: Text(
          '福利卡消费记录',
          style: TextStyle(
            color: Colors.white,
            fontSize: 17,
          ),
        ),
        iconTheme: IconThemeData(
          color: Colors.white,
        ),
      ),
      body: GetBuilder<GiftCardConsumptionRecordLogic>(
        builder: (logic) {
          return Container(
            child: Column(
              children: [
                Container( //sign in
                  height: setWidth(100),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(
                      color: Color(0x40000000),
                      width: setWidth(0.5),
                    ),
                  ),
                  padding: EdgeInsets.symmetric(horizontal: setWidth(30), vertical: setWidth(22)),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Color(0xFFF3F4F6),
                      borderRadius: BorderRadius.circular(setWidth(28)),
                    ),
                    height: setWidth(56),
                    child: TextField(
                      controller: state.orderNumberQueryController,
                      focusNode: state.orderNumberQueryFocusNode,
                      maxLines: 1,
                      style: TextStyle(
                        color: Color(0xff222222),
                        fontSize: 12,
                      ),
                      keyboardType: TextInputType.phone,
                      decoration: InputDecoration(
                        contentPadding: EdgeInsets.zero,
                        hintText: '请输入订单号/福利卡号',
                        prefixIcon: Container(
                          width: setWidth(80),
                          child: Icon(
                            Icons.search,
                            size: setWidth(30),
                            color: Color(0xffcccccc),
                          ),
                        ),
                        hintStyle: TextStyle(
                          color: Color(0xffcccccc),
                          fontSize: 12,
                        ),
                        enabledBorder: OutlineInputBorder( // 设置输入框可编辑时的边框样式
                          borderRadius: BorderRadius.all(Radius.circular(28)),  // 设置边框四个角的弧度
                          borderSide: BorderSide(  // 用来配置边框的样式
                            color: Colors.transparent,  // 设置边框的颜色
                            width: setWidth(1),  // 设置边框的粗细
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(  // 用来配置输入框获取焦点时的颜色
                          borderRadius: BorderRadius.all(Radius.circular(28)),  // 设置边框四个角的弧度
                          borderSide: BorderSide(  // 用来配置边框的样式
                            color: Colors.transparent,  // 设置边框的颜色
                            width: setWidth(1),  // 设置边框的粗细
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: logic.state.consumptionRecordList.length > 0
                    ? Container(
                    child: SmartRefresher(
                      enablePullDown: true,
                      enablePullUp: true,
                      header: CustomHeader(
                        builder: (BuildContext context, RefreshStatus mode) {
                          return Container(
                            height: 55.0,
                            child: Center(child: CupertinoActivityIndicator()),
                          );
                        },
                      ),
                      footer: CustomFooter(
                        builder: (BuildContext context, LoadStatus mode){
                          Widget body;
                          if(mode == LoadStatus.idle){
                            body =  Text("上拉加载更多");
                          }
                          else if(mode == LoadStatus.loading){
                            body =  CupertinoActivityIndicator();
                          }
                          else if(mode == LoadStatus.failed){
                            body = Text("加载失败！点击重试！");
                          }
                          else if(mode == LoadStatus.canLoading){
                            body = Text("释放以加载更多");
                          }
                          else{
                            body = Text("没有更多了");
                          }
                          return Container(
                            height: 55.0,
                            child: Center(child:body),
                          );
                        },
                      ),
                      controller: logic.refreshController,
                      onRefresh: _onRefresh,
                      onLoading: _onLoading,
                      child: ListView.separated(
                        itemCount: logic.state.consumptionRecordList.length,
                        itemBuilder: (context, index) {
                          return Container(
                            color: Colors.white,
                            child: Column(
                              children: [
                                Container(
                                  padding: EdgeInsets.symmetric(horizontal: setWidth(30), vertical: 10),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            '壹品慧福利卡',
                                            style: TextStyle(
                                              color: Color(0xff333333),
                                              fontSize: 14,
                                              fontWeight: FontWeight.bold,
                                            ),
                                          ),
                                          Text(
                                            "￥${logic.state.consumptionRecordList[index]["amount"]}",
                                            style: TextStyle(
                                              color: Color(0xffEC1717),
                                              fontSize: 16,
                                              fontWeight: FontWeight.bold,
                                            ),
                                          ),
                                        ],
                                      ),
                                      SizedBox(
                                        height: setWidth(10),
                                      ),
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [

                                           Text(
                                            'NO：${logic.state.consumptionRecordList[index]["card_no"]}',
                                            style: TextStyle(
                                              color: Color(0xff666666),
                                              fontSize: 12,
                                            ),
                                          ),
                                            Text(
                                             logic.state.consumptionRecordList[index]["consume_typeText"],
                                            style: TextStyle(
                                              color: Color(0xff666666),
                                              fontSize: 12,
                                            ),
                                          ),
                                        ],
                                      ),
                                      SizedBox(
                                        height: setWidth(5),
                                      ),
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            '订单号：${logic.state.consumptionRecordList[index]["trade_no"]}',
                                            style: TextStyle(
                                              color: Color(0xff666666),
                                              fontSize: 12,
                                            ),
                                          ),
                                          Text(
                                            // '2019-06-23 17:34:22',
                                            '${logic.state.consumptionRecordList[index]["create_dtme"]}',
                                            style: TextStyle(
                                              color: Color(0xffcccccc),
                                              fontSize: 11,
                                            ),
                                          ),
                                        ],
                                      )
                                    ],
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.symmetric(horizontal: setWidth(20)),
                                  child: Container(
                                    color: Color(0xffEFEFEF).withOpacity(0.5),
                                    height: setWidth(1),
                                  ),
                                ),
                              ],
                            ),
                          );
                        },
                        separatorBuilder: (context, index) {
                          return Divider(height: 1, indent: 15, endIndent: 15);
                        },
                      ),
                    ),
                  )
                    : Container(
                        child: Center(
                          child: Text("暂无记录"),
                        ),
                      )
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}